<template>
	<view class="predetermine" @click="clearCountdown">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 300rpx" mode="widthFix" :src="src">
			</image>
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text>
					<text>{{ view.user.mobile?view.user.mobile:view.user.user.mobile }}</text>|
					<!-- <text>{{
						typeof (view.user?.level * 1) === 'number'
							? `${view.user.level === 0 ? '普通會員  ' : ''}`
							: ''
					}}</text> -->
					<text>
						{{ view.user.mobile?view.user.level === 0 ? '普通會員':'' : view.user.user.level === 0 ? '普通會員' : '' }}
					</text>
					|

					<!-- <text v-if="view.user?.mobile" @click="logout">退出</text> -->
					<text @click="logout">退出</text>
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll_Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="ticket">
					<view v-for="(item, key) of list" class="ticket_box" @click="handShopping(item)" :key="key">
						<view class="count_down" v-if="item.room_status == 1">
							<u-count-down :time="orderCountDown(item.order_end)" format="HH:mm:ss"></u-count-down>
							<text>結束</text>
						</view>
						<view class="item1">
							<up-image :src="item.image" mode="aspectFit" radius="10rpx" width="230rpx"
								height="180rpx"></up-image>
							<view class="item1_title">{{ item.name }}</view>
						</view>
						<view class="item2">
							<view class="itme2_list2" :class="{using:item.room_status == 1}">
								{{ item.room_status === 0 ? '空閒中' : '' }}
								{{item.room_status === 1 ? '使用中' : '' }}
								{{ item.room_status === 2 ? '待打掃' : '' }}
								{{ item.room_status === 3 ? '打掃中' : '' }}
								{{ item.room_status === 5 ? '已下架' : '' }}
							</view>
							<view class="itme2_list3">立即預定</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer">
			<view class="btn_box">
				<view class="container">
					<up-button class="bth" color="#39B19D" :disabled="preDisabled" @click="handPrePage">
						上一页
					</up-button>
					<up-button class="bth" color="#39B19D" :disabled="nextDisabled" @click="handNextPage">
						下一頁
					</up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		formatDate
	} from '@/utils/formatDate.js';
	export default {
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				preDisabled: true,
				nextDisabled: false,
				changeText: '獲取驗證碼',
				form: {},
				view: {
					ticket: {},
					user: {},
					store: '',
					coupon: '',
				},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				page: 1,
				room_total: 0,
				timer: null,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			const {
				user
			} = useStore();
			const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
			const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
			this.view = {
				ticket: user.ticket,
				user: userOptions,
				store: equipmentOptions.name,
				coupon: '',
			};
			this.countdown();
			this.getRoomList('equipmentOptions', equipmentOptions);
			// const token = JSON.parse(uni.getStorageSync('token'))
			// 	? JSON.parse(uni.getStorageSync('token'))
			// 	: ''; // 1 店家 2商家
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 	});
			// } else {
			// }
			this.setSwiperImg();
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		methods: {
			countdown() {
				this.timer = setTimeout(() => {
					// uni.navigateTo({
					// 	url: '/pages/index/index',
					// });
				}, 1000 * 60 * 10);
			},
			clearCountdown() {
				clearTimeout(this.timer);
				this.countdown();
			},
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);

				// const _src = equipmentOptions.imagejh ?
				// 	equipmentOptions.imagejh.split(',') : [];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }

				this.src = baseURL + equipmentOptions.image4
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			// 获取房间具体信息（是否正在使用中之类的）
			getRoomList() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				uni.request({
					url: baseURL + '/api/index/getRoom',
					data: {
						store_id: equipmentOptions.data.data.store_id,
						page: this.page,
					},
					header: {
						Accept: 'application/json',
						'Content-Type': 'application/json',
						'X-Requested-With': 'XMLHttpRequest',
					},
					method: 'GET',
					sslVerify: false,
					success: res => {
						this.list = res.data.data.room;
						this.room_total = res.data.data.room_total;
						this.nextDisabled = res.data.data?.room_total <= 10 ? true : false;
					},
					fail: error => {

					},
				});
			},
			formatDate(data) {
				return formatDate(data);
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'predetermineDetails':
						url = '/pages/predetermineDetails/predetermineDetails';
						break;
					case 'logout':
						url = '/pages/index/index';
						break;
					default:
				}
				uni.navigateTo({
					url
				});
			},
			handPrePage() {
				if (this.page !== 1) {
					this.page -= 1;
					this.preDisabled = false;
					this.getRoomList();

				} else if (this.page <= 1) {
					this.preDisabled = true;
				}
			},
			handNextPage() {
				this.page += 1;
				this.preDisabled = false;
				this.nextDisabled = this.room_total <= 10 * this.page ? true : false;
				this.getRoomList();
			},
			handShopping(data) {

				const {
					user,
					room
				} = useStore();
				user.setTicketState(data);
				room.setRoomOptions(data);
				this.jump('predetermineDetails');
			},
			logout() {
				uni.removeStorageSync('userOptions');
				this.jump('logout');
			},
			upper(e) {
				// console.log(e);
			},
			lower(e) {
				// console.log(e, '已经滚动到底部');
			},
			scroll(e) {
				// console.log(e, '记录滚动相关的数据');
			},
			back() {
				uni.reLaunch({
					url: '/pages/shop/shop'
				})
			},
			orderCountDown(end) {
				if (!end) return
				let e = new Date(end * 1000).getTime()
				let n = new Date().getTime()
				return e - n
			}
		},
	};
</script>

<style lang="scss" scoped>
	.predetermine {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;
			height: 300rpx;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 150rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;
				z-index: 11;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx;
			font-size: 24rpx;
			color: #39B19D;

			.title {
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: #39B19D;
				display: flex;
				justify-content: space-between;
			}

			.scroll_Y {
				width: 100%; // 滚动区域的宽度
				// height: 800rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些
				// background-color: skyblue;
				// overflow: hidden;
				height: 60vh;
			}

			.ticket {
				width: 100%;
				// height: 100%;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;

				.ticket_box {
					width: 230rpx;
					// height: 260rpx;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					background-color: $uni-color-white;
					// border: 1rpx solid #39B19D;
					// overflow: hidden;
					position: relative;

					.count_down {
						display: flex;
						align-items: center;
						background-color: #ff914d;
						// margin-left: 10rpx;
						color: #fff;
						width: 100%;
						justify-content: center;
						// padding: 2rpx 10rpx;
						border-radius: 10rpx;
						box-sizing: border-box;
						position: absolute;
						top: 0;
						z-index: 999999;

						::v-deep .u-count-down {
							margin-right: 10rpx;
						}

						::v-deep .u-count-down__text {
							color: #fff;
							font-size: 30rpx;
						}
					}

					.item1 {
						position: relative;
						width: 230rpx;
						height: 180rpx;
						border-radius: 20rpx;
						border: 1rpx solid #39B19D;
						// overflow: hidden;

						::v-deep .u-image {
							width: 230rpx !important;
							height: 180rpx !important;
							border-radius: 20rpx !important;
						}

						::v-deep .u-image__image {
							width: 230rpx !important;
							height: 180rpx !important;
							border-radius: 20rpx !important;
						}

						::v-deep .u-image__loading {
							width: 230rpx !important;
							height: 180rpx !important;
							border-radius: 20rpx !important;
						}

						::v-deep .u-image__error {
							width: 230rpx !important;
							height: 180rpx !important;
							border-radius: 20rpx !important;
						}

						&_title {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							font-size: 24rpx;
							color: #fff;
							text-align: center;
							background-color: rgba(0, 0, 0, 0.5);
							white-space: nowrap;
							// 设置文本超出元素宽度部分隐藏
							overflow-x: hidden;
							// 设置文本超出部分用省略号显示
							text-overflow: ellipsis;
							border-radius: 0 0 20rpx 20rpx;
						}
					}

					.item2 {
						width: 100%;
						// padding: 10rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;

						.itme2_list2 {
							// width: 70rpx;
							padding: 3rpx 8rpx;
							font-size: 26rpx;
							text-align: center;
							white-space: nowrap;
							// transform: scale(0.5);
							background-color: #39B19D-light;
						}

						.using {
							background-color: orangered;
							color: #fff;
						}

						.itme2_list3 {
							width: 100rpx;
							padding: 3rpx 8rpx;
							font-size: 26rpx;
							text-align: center;
							white-space: nowrap;
							// transform: scale(0.5);
							border-radius: 3rpx;
							background-color: #39B19D;
							color: $uni-color-white;
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: $uni-spacing-col-base;
			width: 100%;
			background-color: #fff;

			background-color: $uni-color-white;

			.btn_box {
				padding: 10rpx;

				.container {
					padding: 0 $uni-spacing-row-base;
					display: flex;
					justify-content: space-around;

					.bth {
						width: 300rpx;
					}
				}
			}
		}
	}
</style>